import React, { useState, useEffect } from "react";
import { Card, Button, Radio, Row, Col, Segmented, Input, InputNumber, Tabs, Divider, notification, Modal, Space, Checkbox, Alert } from 'antd'
import { connect, history } from 'umi';
import './index.less'
function hexToRGBA(hex, opacity) {
    // 清理 HEX 值
    if (!hex) {
        return
    }
    let cleanHex = hex.replace('#', '');

    // 处理简写格式 (如 #FFF)
    if (cleanHex.length === 3) {
        cleanHex = cleanHex.split('').map(char => char + char).join('');
    }

    // 验证 HEX 格式
    if (!/^[0-9A-F]{6}$/i.test(cleanHex)) {
        throw new Error('Invalid HEX color format');
    }

    // 限制透明度范围 (0~1)
    const clampedOpacity = Math.min(1, Math.max(0, opacity));

    // 提取 RGB 值
    const r = parseInt(cleanHex.substring(0, 2), 16);
    const g = parseInt(cleanHex.substring(2, 4), 16);
    const b = parseInt(cleanHex.substring(4, 6), 16);

    return `rgba(${r}, ${g}, ${b}, ${clampedOpacity})`;
}
const StageConfigurationSetting = (props) => {
    const { data = [], onChange, children, hideCard = true, showType, NoCard = false, defaultStage } = props
    const [active, setActive] = useState({})
    const [activeKey, setActiveKey] = useState(null);
    const [initFlag, setInitFlag] = useState(false)
    const { stageColor } = active
    useEffect(() => {
        if (data.length && !initFlag) {
            if (defaultStage) {
                const children = data.filter(val => {
                    const { stageInfo = {} } = val
                    return defaultStage === stageInfo.stageIdentification
                })[0]
                const father = data.filter(val => {
                    const { stageInfo = {} } = val
                    return children.stageInfo.mainStage === stageInfo.stageIdentification
                })[0]
                if (father && children) {
                    setActiveKey(defaultStage)
                    setActive(father.stageInfo)
                }
                setInitFlag(true)
            }
            else {
                const activeData = data.filter(val => {
                    const { stageInfo = {} } = val
                    return stageInfo.baseStageFlag === '1'
                })[0]

                const children = data.filter(val => {
                    const { stageInfo = {} } = val
                    return (stageInfo.mainStage === activeData.stageInfo.stageIdentification) && (val.stageIdentification !== activeData.stageInfo.stageIdentification)
                })[0]

                if (children) {
                    const { stageInfo = {} } = children
                    setActiveKey(stageInfo.stageIdentification)
                }
                setActive(activeData.stageInfo)
                setInitFlag(true)
            }

        }

    }, [data])

    useEffect(() => {
        onChange(activeKey, active)
    }, [activeKey])
    const stage = data.filter(val => {
        const { stageInfo = {} } = val
        return stageInfo.baseStageFlag === '1'
    })
    const childStage = data.filter(val => {
        const { stageInfo = {} } = val
        return stageInfo.mainStage === active.stageIdentification && stageInfo.baseStageFlag !== '1'
    })
    const stageStyle = (index) => {
        if (index === 0) {
            return 'StageConfigurationSetting_SelectStage_clip_path'
        }
        return 'StageConfigurationSetting_SelectStage_clip_pathLast'
    }
    const onChangeChildren = (newActiveKey) => {
        setActiveKey(newActiveKey.target.value);
    };
    if (showType === 'Button') {
        return <Row gutter={[12, 12]} className="" >
            <Col span={24}>
                <Segmented
                    value={active.stageIdentification}
                    onChange={(e) => {
                        const father = data.filter(key => {
                            const { stageInfo } = key
                            return stageInfo.stageIdentification === e
                        })[0]
                        const children = data.filter(key => {
                            const { stageInfo } = key
                            return stageInfo.mainStage === e && e !== stageInfo.stageIdentification
                        })[0]
                        setActive(father.stageInfo)
                        if (children) {
                            setActiveKey(children.stageInfo.stageIdentification)
                        }
                        else {
                            setActiveKey(stageIdentification)
                        }
                    }}
                    options={stage.map(val => {
                        const { stageInfo = {} } = val
                        const { stageColor, stageIdentification, stageName, subStageInfoList
                        } = stageInfo
                        return {
                            label: stageName,
                            value: stageIdentification
                        }
                    })}></Segmented>
            </Col>
            <Col span={24}>
                {childStage.length > 0 ?
                    <Radio.Group
                        optionType={'button'}
                        onChange={onChangeChildren}
                        value={activeKey}
                        options={childStage.map(val => {
                            const { stageInfo = {} } = val
                            return {
                                ...stageInfo,
                                label: stageInfo.stageName,
                                value: stageInfo.stageIdentification,
                            }
                        })}
                        style={{
                            marginTop: 16,
                        }}
                    >
                    </Radio.Group>
                    : null}
            </Col>

            {children ? <div style={{ marginTop: 20 }}>
                {children}
            </div> : ''}
        </Row>
    } else if (NoCard) {
        return <div bordered={hideCard} className="StageConfigurationSetting_box" >
            <div className="StageConfigurationSetting_SelectStage_box">
                {stage.map((val, index) => {
                    const { stageInfo = {} } = val
                    const { stageColor, stageIdentification, stageName, subStageInfoList
                    } = stageInfo
                    if (index === 0 || index === stage.length - 1) {
                        return <div onClick={() => {
                            const children = data.filter(key => {
                                const { stageInfo } = key
                                return stageInfo.mainStage === stageIdentification && stageIdentification !== stageInfo.stageIdentification
                            })[0]
                            setActive(val.stageInfo)
                            if (children) {
                                setActiveKey(children.stageInfo.stageIdentification)
                            }
                            else {
                                setActiveKey(stageIdentification)
                            }
                        }} className="StageConfigurationSetting_SelectStage_content_box">
                            <div style={{ background: stageColor }} className={active.stageIdentification === stageIdentification ? `StageConfigurationSetting_list_box ${stageStyle(index)}` : `${stageStyle(index)} StageConfigurationSetting_list_box StageConfigurationSetting_list_opcity`}>
                                {active.stageIdentification === stageIdentification ? <div style={{ color: stageColor }} className="StageConfigurationSetting_active_check">✓</div> : null}
                                <div style={{ textDecoration: 'underline', cursor: 'pointer' }}>
                                    {stageName}
                                </div>

                            </div>
                        </div>
                    }
                    return <div className="StageConfigurationSetting_SelectStage_content_box">
                        <div onClick={() => {
                            const children = data.filter(key => {
                                const { stageInfo } = key
                                return stageInfo.mainStage === stageIdentification && stageIdentification !== stageInfo.stageIdentification
                            })[0]
                            setActive(val.stageInfo)
                            if (children) {
                                setActiveKey(children.stageInfo.stageIdentification)
                            }
                            else {
                                setActiveKey(stageIdentification)
                            }
                        }} style={{ background: stageColor, }} className={active.stageIdentification === stageIdentification ? 'StageConfigurationSetting_list_box' : 'StageConfigurationSetting_list_box StageConfigurationSetting_list_opcity'}>
                            {active.stageIdentification === stageIdentification ? <div style={{ color: stageColor }} className="StageConfigurationSetting_active_check">✓</div> : null}
                            <div style={{ textDecoration: 'underline', cursor: 'pointer' }}>
                                {stageName}
                            </div>

                        </div>
                    </div>
                })}
            </div>
            <div className="SelectStage_list_itemBox">
                <div style={{ background: hexToRGBA(stageColor, 0.1), }} className={'SelectStage_list_item'}>
                    {childStage.length > 0 ?
                        childStage.map(val => {
                            const { stageInfo = {} } = val
                            return {
                                ...stageInfo,
                                ...val
                            }
                        }).map(value => {
                            const { stageIdentification } = value
                            console.log(value, 'value-------------------------------')
                            return <div onClick={() => {
                                setActiveKey(stageIdentification)
                            }} style={{ background: activeKey === value.stageIdentification ? stageColor : '#ffffff', color: activeKey === value.stageIdentification ? '#FFFFFF' : '#65676C' }} className="SelectStage_tag_box">{value.stageName}</div>
                        })
                        // <Radio.Group
                        //     optionType={'button'}
                        //     onChange={onChangeChildren}
                        //     value={activeKey}
                        //     options={childStage.map(val => {
                        //         const { stageInfo = {} } = val
                        //         return {
                        //             ...stageInfo,
                        //             label: stageInfo.stageName,
                        //             value: stageInfo.stageIdentification,
                        //         }
                        //     })}
                        //     style={{
                        //         marginTop: 16,
                        //     }}
                        // >
                        // </Radio.Group>

                        : null}
                </div>
            </div>

            {children ? <div style={{ marginTop: 20 }}>
                {children}
            </div> : ''}
        </div>
    }
    return <Card bordered={hideCard} className="StageConfigurationSetting_box" >
        <div className="StageConfigurationSetting_SelectStage_box">
            {stage.map((val, index) => {
                const { stageInfo = {} } = val
                const { stageColor, stageIdentification, stageName, subStageInfoList
                } = stageInfo
                if (index === 0 || index === stage.length - 1) {
                    return <div onClick={() => {
                        const children = data.filter(key => {
                            const { stageInfo } = key
                            return stageInfo.mainStage === stageIdentification && stageIdentification !== stageInfo.stageIdentification
                        })[0]
                        setActive(val.stageInfo)
                        if (children) {
                            setActiveKey(children.stageInfo.stageIdentification)
                        }
                        else {
                            setActiveKey(stageIdentification)
                        }
                    }} className="StageConfigurationSetting_SelectStage_content_box">
                        <div style={{ background: stageColor }} className={active.stageIdentification === stageIdentification ? `StageConfigurationSetting_list_box ${stageStyle(index)}` : `${stageStyle(index)} StageConfigurationSetting_list_box StageConfigurationSetting_list_opcity`}>
                            {active.stageIdentification === stageIdentification ? <div style={{ color: stageColor }} className="StageConfigurationSetting_active_check">✓</div> : null}
                            <div style={{ textDecoration: 'underline', cursor: 'pointer' }}>
                                {stageName}
                            </div>

                        </div>
                    </div>
                }
                return <div className="StageConfigurationSetting_SelectStage_content_box">
                    <div onClick={() => {
                        const children = data.filter(key => {
                            const { stageInfo } = key
                            return stageInfo.mainStage === stageIdentification && stageIdentification !== stageInfo.stageIdentification
                        })[0]
                        setActive(val.stageInfo)
                        if (children) {
                            setActiveKey(children.stageInfo.stageIdentification)
                        }
                        else {
                            setActiveKey(stageIdentification)
                        }
                    }} style={{ background: stageColor, }} className={active.stageIdentification === stageIdentification ? 'StageConfigurationSetting_list_box' : 'StageConfigurationSetting_list_box StageConfigurationSetting_list_opcity'}>
                        {active.stageIdentification === stageIdentification ? <div style={{ color: stageColor }} className="StageConfigurationSetting_active_check">✓</div> : null}
                        <div style={{ textDecoration: 'underline', cursor: 'pointer' }}>
                            {stageName}
                        </div>

                    </div>
                </div>
            })}
        </div>
        <div className="SelectStage_list_itemBox">
            <div style={{ background: hexToRGBA(stageColor, 0.1), }} className={'SelectStage_list_item'}>
                {childStage.length > 0 ?
                    childStage.map(val => {
                        const { stageInfo = {} } = val
                        return {
                            ...stageInfo,
                            ...val
                        }
                    }).map(value => {
                        const { stageIdentification } = value
                        console.log(value, 'value-------------------------------')
                        return <div onClick={() => {
                            setActiveKey(stageIdentification)
                        }} style={{ background: activeKey === value.stageIdentification ? stageColor : '#ffffff', color: activeKey === value.stageIdentification ? '#FFFFFF' : '#65676C' }} className="SelectStage_tag_box">{value.stageName}</div>
                    })
                    // <Radio.Group
                    //     optionType={'button'}
                    //     onChange={onChangeChildren}
                    //     value={activeKey}
                    //     options={childStage.map(val => {
                    //         const { stageInfo = {} } = val
                    //         return {
                    //             ...stageInfo,
                    //             label: stageInfo.stageName,
                    //             value: stageInfo.stageIdentification,
                    //         }
                    //     })}
                    //     style={{
                    //         marginTop: 16,
                    //     }}
                    // >
                    // </Radio.Group>

                    : null}
            </div>
        </div>

        {children ? <div style={{ marginTop: 20 }}>
            {children}
        </div> : ''}
    </Card>

}
export default connect(({ loading }) => ({
    loading
}))(StageConfigurationSetting);
